<template>
  <div class="map-wrapper">
    <!-- 导航 -->
    <van-nav-bar
      title="收藏列表"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 地图部分 -->
    <baidu-map id="bm-view" class="bm-view" :center="center" :zoom="zoom"  @ready="handler">
      <!-- 移动控件 -->
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <!-- 区域气泡显示 -->
      <div v-if='showZone===1'>
        <zone-overlay
        v-for="(item, index) in zoneGeoPoints" :key="index"
        :position="{lng: item.coord.longitude, lat: item.coord.latitude}"
        :text="item"
        @click.native="selZone(item, 2)"
        @touchend.native="selZone(item, 2)"
        >
        ></zone-overlay>
      </div>

         <!-- 绿色周边组件 -->
      <div v-if='showZone===2'>
        <around-overlay
        v-for="(item, index) in neighborList" :key="index"
        :position="{lng: item.coord.longitude, lat: item.coord.latitude}"
        :text="item"
        @click.native="selZone(item, 3)"
        @touchend.native="selZone(item, 3)"
        >
        </around-overlay>
      </div>
      <!-- 绿色三级组件 -->
      <div v-if='showZone===3'>
            <specific-overlay
            v-for="(item, index) in neighborList" :key="index"
            :position="{lng: item.coord.longitude, lat: item.coord.latitude}"
            :text="item"
            @click.native='changeShow(item)'
            @touchend.native='changeShow(item)'
            >
            </specific-overlay>
        </div>

       <!-- 房屋详情弹出层 -->
    <van-popup class='pop' v-model="show" position="bottom" :style="{ height: '50%' }" >
      <div class='pop-title'>
      <h1>房屋列表</h1>
      <span @click='$router.push("/find")'>更多房源</span>
      </div>
      <!-- 房屋列表 -->
      <van-card
        :price="item.price+'元/月'"
        :desc="item.desc"
        :title="item.title"
        :thumb="'http://liufusong.top:8080'+item.houseImg"
        v-for='item in houselist'
        :key='item.houseCode'
      >
        <template #tags>
          <van-tag plain type="danger" color='#39becd'
          v-for='(item,index) in item.tags' :key='index'
          >
            {{item}}
          </van-tag>
        </template>
      </van-card>
    </van-popup>
    </baidu-map>
</div>

</template>
<script>
import { gethouseareasdetail, houseinformation } from '@/api/map'
import zoneOverlay from './components/zoneOverlay'
import AroundOverlay from './components/AroundOverlay'
import { Toast } from 'vant'
import SpecificOverlay from './components/SpecificOverlay'
export default {
  components: {
    zoneOverlay,
    AroundOverlay,
    SpecificOverlay
  },
  data () {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 11,
      showZone: 1,
      zoneGeoPoints: [],
      neighborList: [],
      houselist: [],
      show: false,
      hotCity: [
        {
          name: '北京',
          lng: 116.404,
          lat: 39.915
        },
        {
          name: '上海',
          lng: 121.48,
          lat: 31.22
        },
        {
          name: '广州',
          lng: 113.27,
          lat: 23.13
        },
        {
          name: '深圳',
          lng: 114.03,
          lat: 22.32
        }
      ]
    }
  },
  created () {
    this.gethousesource()
  },
  methods: {
    // 地图初始化
    handler ({ BMap, map }) {
      this.hotCity.forEach(item => {
        if (item.name === this.$store.state.cityname.label) {
          this.center.lng = item.lng
          this.center.lat = item.lat
        }
      })
      this.zoom = 11
    },
    async  selZone (item, num) {
      Toast.loading({
        duration: 0,
        message: 'loading',
        forbidClick: true
      })
      this.showZone = num
      this.$set(this.center, 'lng', item.coord.longitude)
      this.$set(this.center, 'lat', item.coord.latitude)
      this.zoom = this.zoom + num
      const res = await gethouseareasdetail(item.value)
      console.log(res)
      this.neighborList = res.data.body
      Toast('成功')
    },
    // 房屋详情页面
    async changeShow (item) {
      console.log(item)
      this.show = true
      const res = await houseinformation(item.value)
      console.log(res)
      this.houselist = res.data.body.list
    },

    async gethousesource () {
      const res = await gethouseareasdetail(this.$store.state.cityname.value)
      console.log(res)
      this.zoneGeoPoints = res.data.body
      console.log(this.zoneGeoPoints)
    }
  }
}
</script>
<style scoped lang='less'>
.bm-view{
    height: 750px; /* for example */
}
.pop{
  .pop-title{
    height: 66px;
    background-color: #aaa;
    display: flex;
    justify-content: space-between;
    align-items: center;
    h1{
      font-size: 24px;
      font-weight: normal;
    }
  }
}
// 基础样式
/deep/.van-icon{
  color:#fff !important;
}
/deep/.van-nav-bar__content{
  background-color: #21b97a;
  .van-nav-bar__title{
    color:#fff
  }
}

// /deep/.zone div p {
//   color: green;
// }
</style>
